import React, { useState } from 'react'
import { Descriptions, Space, Checkbox, Mentions, Radio, Button, DatePicker, Upload, Input } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import '../scss/DueRemind.scss'
export default function TheDoor() {

  //催收时间
  const [Time, setTime] = useState('')
  //是否见到借款人
  const [Yse, setYes] = useState(1)
  //催收人是否签字
  const [Obj, setObj] = useState(1)
  //未见到借款人原因
  const [Option, setOption] = useState(1)
  const [Bec,setBec] = useState('')
  // 催收反馈
  const [fankui,setfankui] = useState('')

  const onChangeTime = (e) => {
    setTime(e._d)
  }

  const ChangeYes = (e) => {
    setYes(e.target.value)
  }

  const ChangeObj = (e) => {
    setObj(e.target.value)
  }

  const ChangeOption = (e) => {
    // console.log(e.target.value);
    setOption(e.target.value)
  }

  const Becs = (e)=>{
    // console.log(e.target.value);
    setBec(e.target.value)
  }

  const Fankui = (e) =>{
    // console.log(e);
    setfankui(e)
  }



  const submint = () => {
    console.log(Time);
    console.log(Yse);
    console.log(Obj);
    if(Option !== 4 ){
      console.log(Option);
    }else{
      console.log(Option);
      console.log(Bec);
    }
    console.log(fankui);
  }

  return (
    <div className='dueremind'>
      <Descriptions bordered>
        <Descriptions.Item label="催收时间:" span={3}>
          <Space direction="vertical" size={12}>
            <DatePicker showTime onChange={onChangeTime} />
          </Space>
        </Descriptions.Item>

        <Descriptions.Item label="是否见到借款人:" span={3}>
          <Radio.Group onChange={ChangeYes} value={Yse} >
            <Radio value={1}>是</Radio>
            <Radio value={2}>否</Radio>
          </Radio.Group>
        </Descriptions.Item>

        <Descriptions.Item label="催收人是否签字" span={3}>
          <Radio.Group onChange={ChangeObj} value={Obj} >
            <Radio value={1}>是</Radio>
            <Radio value={2}>否</Radio>
          </Radio.Group>
        </Descriptions.Item>

        <Descriptions.Item label="未见到借款人原因:" span={3}>
          <Radio.Group onChange={ChangeOption} value={Option} >
            <Radio value={1}>地址错误</Radio>
            <Radio value={2}>借款人不在</Radio>
            <Radio value={3}>见到家属</Radio>
            <Radio value={4}>其他</Radio>
            <Input placeholder="输入原因" className='because' disabled={Option == 4 ? false : true} onChange={Becs}/>
          </Radio.Group>
        </Descriptions.Item>

        <Descriptions.Item label="催收反馈:" span={3}>
          <Mentions placeholder='使用任何催收手段得到的催收结果' onChange={Fankui} >
          </Mentions>
        </Descriptions.Item>


        <Descriptions.Item label="上传录音:" span={3}>
          <Upload >
            <Button icon={<UploadOutlined />}>上传录音</Button>
          </Upload>
        </Descriptions.Item>
      </Descriptions>

      <div className="dueremind-btn">
        <Button type="primary" onClick={submint} >提交</Button>
        <Button  >取消</Button>
      </div>

    </div>
  )
}
